<template>
  <div class="back">
    <header>
      <ul class="Taskhead" ref="taskhead">
        <li><span v-show="i === 1"></span> 设计</li>
        <li><span v-show="i === 2"></span> 开发</li>
        <li><span v-show="i === 3"></span> 完成</li>
        <li><span v-show="i === 4"></span> 关闭</li>
      </ul>
    </header>
    <!-- section代表的是一个故事点 -->
    <div class="mian" ref="main" id="main" @scroll="scroll">
      <section v-for="(projectList, index) in tesks" :key="projectList.id">
        <div class="story">
          <i
            class="el-icon-thumb"
            :id="index"
            style="color: red"
            @click="btn(index)"
          ></i>
          {{ projectList.title }}
        </div>
        <div class="status">
          <!-- statusShow代表一个状态 -->
          <draggable
            class="statusShow"
            animation="1000"
            :tesks="projectList.taskList.id"
            group="itxst"
            @start="onStart"
            @end="onEnd"
            :disabled="abled1 ? false : true"
          >
            <aside
              v-for="item1 in projectList.taskList"
              :key="item1.id"
              v-show="item1.status === '1'"
              @mousedown="startstatus(item1.status, item1.id)"
            >
              <div>
                <i class="el-icon-star-on"></i>
                {{ To }}-{{ item1.id }}
              </div>
              <div class="taskGoal">
                {{ item1.taskGoal }}
              </div>
              <div
                class="taskStatus"
                :class="
                  item1.status === '1'
                    ? 'a'
                    : item1.status === '2'
                    ? 'b'
                    : item1.status === '3'
                    ? 'c'
                    : item1.status === '4'
                    ? 'd'
                    : ''
                "
                v-text="
                  item1.status === '1'
                    ? '未开始'
                    : item1.status === '2'
                    ? '进行中'
                    : item1.status === '3'
                    ? '已完成'
                    : item1.status === '4'
                    ? '已关闭'
                    : ''
                "
              ></div>
              <div class="time">时长：{{ item1.time }}天</div>
              <div class="username">负责人</div>
              <div class="taskedit" @click="taskedit(item1)">
                <i class="el-icon-edit-outline"></i>
              </div>
            </aside>
            <div class="addCreat">
              <div class="tu">
                <textarea
                  id="ipt"
                  rows="3"
                  v-model="addTaskData.taskGoal"
                ></textarea>
              </div>
              <div class="pe">
                <div>
                  时长
                  <input type="number" id="ipt2" v-model="addTaskData.time" />
                </div>
                <div>负责人</div>
              </div>
              <div class="btn">
                <form-row
                  ><el-button
                    type="success"
                    plain
                    @click="increment(projectList.id)"
                    >添加</el-button
                  ></form-row
                >
                <form-row
                  ><el-button type="info" plain @click="handleF"
                    >取消</el-button
                  ></form-row
                >
              </div>
            </div>
            <div class="add" v-show="Add" @click="Addtask">+新建工作项</div>
          </draggable>
          <draggable
            class="statusShow"
            animation="1000"
            :tesks="projectList.taskList.id"
            group="itxst"
            @start="onStart"
            @end="onEnd"
            :disabled="abled2 ? false : true"
          >
            <aside
              v-for="item1 in projectList.taskList"
              :key="item1.id"
              v-show="item1.status === '2'"
              @mousedown="startstatus(item1.status, item1.id)"
            >
              <div>
                <i class="el-icon-star-on"></i>
                {{ To }}-{{ item1.id }}
              </div>
              <div class="taskGoal">
                {{ item1.taskGoal }}
              </div>
              <div
                class="taskStatus"
                :class="
                  item1.status === '1'
                    ? 'a'
                    : item1.status === '2'
                    ? 'b'
                    : item1.status === '3'
                    ? 'c'
                    : item1.status === '4'
                    ? 'd'
                    : ''
                "
                v-text="
                  item1.status === '1'
                    ? '未开始'
                    : item1.status === '2'
                    ? '进行中'
                    : item1.status === '3'
                    ? '已完成'
                    : item1.status === '4'
                    ? '已关闭'
                    : ''
                "
              ></div>
              <div class="time">时长：{{ item1.time }}天</div>
              <div class="username">负责人</div>
              <div class="taskedit" @click="taskedit(item1)">
                <i class="el-icon-edit-outline"></i>
              </div>
            </aside>
          </draggable>
          <draggable
            class="statusShow"
            animation="1000"
            :tesks="projectList.taskList.id"
            group="itxst"
            @start="onStart"
            @end="onEnd"
            :disabled="abled3 ? false : true"
          >
            <aside
              v-for="item1 in projectList.taskList"
              :key="item1.id"
              v-show="item1.status === '3'"
              @mousedown="startstatus(item1.status, item1.id)"
            >
              <div>
                <i class="el-icon-success"></i>
                {{ To }}-{{ item1.id }}
              </div>
              <div class="taskGoal suceess">
                {{ item1.taskGoal }}
              </div>
              <div
                class="taskStatus"
                :class="
                  item1.status === '1'
                    ? 'a'
                    : item1.status === '2'
                    ? 'b'
                    : item1.status === '3'
                    ? 'c'
                    : item1.status === '4'
                    ? 'd'
                    : ''
                "
                v-text="
                  item1.status === '1'
                    ? '未开始'
                    : item1.status === '2'
                    ? '进行中'
                    : item1.status === '3'
                    ? '已完成'
                    : item1.status === '4'
                    ? '已关闭'
                    : ''
                "
              ></div>
              <div class="time">时长：{{ item1.time }}天</div>
              <div class="username">负责人</div>
              <div class="taskedit" @click="taskedit(item1)">
                <i class="el-icon-edit-outline"></i>
              </div>
            </aside>
          </draggable>
          <draggable
            class="statusShow"
            animation="1000"
            :tesks="projectList.taskList.id"
            group="itxst"
            @start="onStart"
            @end="onEnd"
            :disabled="abled4 ? false : true"
          >
            <aside
              v-for="item1 in projectList.taskList"
              :key="item1.id"
              v-show="item1.status === '4'"
              @mousedown="startstatus(item1.status, item1.id)"
            >
              <div>
                <i class="el-icon-success"></i>
                {{ To }}-{{ item1.id }}
              </div>
              <div class="taskGoal suceess">
                {{ item1.taskGoal }}
              </div>
              <div
                class="taskStatus"
                :class="
                  item1.status === '1'
                    ? 'a'
                    : item1.status === '2'
                    ? 'b'
                    : item1.status === '3'
                    ? 'c'
                    : item1.status === '4'
                    ? 'd'
                    : ''
                "
                v-text="
                  item1.status === '1'
                    ? '未开始'
                    : item1.status === '2'
                    ? '进行中'
                    : item1.status === '3'
                    ? '已完成'
                    : item1.status === '4'
                    ? '已关闭'
                    : ''
                "
              ></div>
              <div class="time">时长：{{ item1.time }}天</div>
              <div class="username">负责人</div>
              <div class="taskedit" @click="taskedit(item1)">
                <i class="el-icon-edit-outline"></i>
              </div>
            </aside>
          </draggable>
        </div>
      </section>
    </div>
    <!-- 编辑当前任务的弹框组件 -->
    <div class="taskBackground" v-show="visibled">
      <TaskFormation
        :visibled.sync="visibled"
        :task="taskFormation"
        :rows="rows"
      ></TaskFormation>
    </div>
  </div>
</template>

<script>
//导入draggable组件
import draggable from "vuedraggable";
import TaskFormation from "./taskFormation.vue";
import "@/assets/css/task.css";
import $ from "jquery";
export default {
  inject: ["reload"],
  props: ["rows"],
  name: "Task",
  // 注册draggable组件
  components: {
    draggable,
    TaskFormation,
  },
  data() {
    return {
      abled1: true,
      abled2: true,
      abled3: true,
      abled4: true,
      drag: false,
      //存储规则
      i: 0,
      //任务的状态
      tesks: [],
      //当前任务id
      id: "",
      //当前任务的状态
      status: "",
      Add: true,
      //添加任务
      addTaskData: {
        taskGoal: "",
        time: "",
        userStoryId: "",
      },
      title: "",
      offTop: "",
      show: true,
      //编辑任务
      visibled: false,
      taskFormation: "",
    };
  },
  computed: {
    To: function () {
      return this.title.substring(0, 3);
    },
  },
  watch: {
    rows: {
      handler(newVal, oldVal) {
        this.title = newVal.name;
        if (newVal) {
          this.$http({
            method: "post",
            url: `userStory/selectAllUserStory?spurtId=${newVal.id}`,
          }).then(({data}) => {
            if (data.flag) {
              this.tesks = data.data;
            } else {
              console.log(data);
            }
          });
        }
      },
    },
  },
  methods: {
    btn(index) {
      let show = document.getElementById(index).parentNode.nextSibling;
      $(show).toggle();
    },
    //获得当前任务的状态,获取规则
    startstatus(status, id) {
      switch (status) {
        case "1":
          this.abled3 = false;
          this.abled4 = false;
          break;
        case "2":
          this.abled1 = false;
          this.abled4 = false;
          break;
        case "3":
          this.abled1 = false;
          this.abled2 = false;
          break;
        case "4":
          this.abled1 = true;
          this.abled2 = true;
          this.abled3 = true;
          this.abled4 = true;
          break;
        default:
          break;
      }
      this.id = id;
      this.status = status;
      this.$http({
        method: "post",
        url: `task/selectRuleByStatus?status=${status}`,
      }).then(({data}) => {
        if (data.flag) {
          this.i = data.data;
        } else {
          alert("错误");
        }
      });
    },
    //开始拖拽事件
    onStart(e) {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd(e) {
      this.i = 0;
      this.drag = false;
      let newstatus =
        e.to.offsetLeft === 24
          ? "1"
          : e.to.offsetLeft === 370
          ? "2"
          : e.to.offsetLeft === 715
          ? "3"
          : e.to.offsetLeft === 1061
          ? "4"
          : "";
      let obj = {};
      obj.status = newstatus;
      obj.id = this.id;
      if (this.status != newstatus) {
        this.$http({
          method: "post",
          headers: {
            "content-type": "application/json",
          },
          url: "task/updateTask",
          data: JSON.stringify(obj),
        }).then(({data}) => {
          if (data.flag) {
            this.reload();
          } else {
            this.reload();
          }
        });
      } else {
        this.reload();
      }
    },
    //新建任务
    Addtask(e) {
      this.Add = false;
      e.currentTarget.previousElementSibling.className = "show";
    },
    //新建任务确定按钮
    increment(id) {
      this.addTaskData.userStoryId = id;
      this.addTaskData.time = Number(this.addTaskData.time);
      // console.log(this.addTaskData);
      this.$http({
        method: "post",
        headers: {
          "content-type": "application/json",
        },
        url: "task/addTask",
        data: JSON.stringify(this.addTaskData),
      }).then(({data}) => {
        if (data.flag) {
          this.reload();
        } else {
          this.reload();
          this.$message.error("当前工时已分配完", this.sucess());
        }
      });
    },
    //取消
    handleF(e) {
      this.Add = true;
      e.currentTarget.parentElement.parentElement.parentElement.className =
        "addCreat";
    },
    scroll(e) {
      sessionStorage.setItem("top", e.target.scrollTop);
    },
    //编辑任务
    taskedit(item) {
      this.taskFormation = item;
      this.visibled = true;
    },
  },
  mounted() {
    this.Statusnum = this.$refs.taskhead.children.length;
  },
  updated() {
    //$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 。
    this.$nextTick(() => {
      this.$refs.main.scrollTop = sessionStorage.getItem("top");
    });
  },
};
</script>

<style lang="less" scoped>
* {
  touch-action: pan-y;
}
.show {
  height: 183px;
  padding: 10px;
  display: block;
  background-color: #fff;
  .tu {
    width: 290px;
    padding: 5px;
    height: 75px;
    overflow: auto;
    margin-bottom: 10px;
    border: 1px solid rgb(87, 172, 255);
    #ipt {
      width: 286px;
      outline: none;
      resize: none;
      background-color: transparent;
      border-style: none;
    }
  }
  #ipt2 {
    outline: none;
    width: 56px;
  }
  .pe {
    width: 237px;
    display: flex;
    justify-content: space-between;
    color: rgb(46, 45, 45);
  }
  .btn {
    margin-top: 10px;
    width: 160px;
    display: flex;
    justify-content: space-between;
  }
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.taskBackground {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 98;

  background-color: rgba(0, 0, 0, 0.5);
}
</style>